<template>
  <div class="avatar">
    <!-- TODO 因老罗做的是在评论区只能点击自己的头像跳转到个人主页所以这边需要修改成所有人都可以跳转 -->
    <router-link v-if="userId" :to="`/user/${userId}`" target="_blank">
      <Cover
        :lazy="lazy"
        :width="width"
        :source="avatar!"
        :defautl-img="defaultAvatar"
        border-radius="50%"
        :scale="1"
      />
    </router-link>
    <Cover
      v-else
      :lazy="lazy"
      :width="width"
      :source="avatar!"
      :defautl-img="defaultAvatar"
      border-radius="50%"
      :scale="1"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, withDefaults } from 'vue'

const defaultAvatar = ref('user.png')

const props = withDefaults(
  defineProps<{
    avatar?: string | File
    width?: number
    lazy?: boolean
    userId?: string
  }>(),
  {
    //提供默认值
    width: 50,
    lazy: true
  }
)
</script>

<style lang="less" scoped></style>
